<template>

  <div class="forgetPasswordBox">
    <!-- header -->
    <loginHeader></loginHeader>
    <!-- header end -->
    <div class="public-header mat">
      <h2 class="public-header-ch">个人忘记密码</h2>
      <p class="public-header-en">FORGET YOUR PASSWORD</p>
      <div class="public-header-line"></div>
    </div>
    <div class="contentBox">
      <el-form :model="ruleForm"  
        :rules="rules" status-icon ref="ruleForm" 
        :label-position="labelPosition"  
        label-width="100px" class="demo-ruleForm"
      >
        <div class="forms-line clear">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="ruleForm.phone" placeholder="请输入手机号码" ></el-input>
            </el-form-item>
            <el-form-item label="手机验证码" prop="phoneCode">
              <el-input v-model="ruleForm.phoneCode" placeholder="请输入手机验证码" class="right-input"></el-input>
              <button type="button" class="right-btn" @click="sendCode()">发送验证码</button>
            </el-form-item>
        </div>
        <div class="forms-line clear"> 
            <el-form-item label="新密码" prop="password">
              <el-input type="password" v-model="ruleForm.password" placeholder="请输入新密码" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码确认" prop="checkPassword">
              <el-input type="password" v-model="ruleForm.checkPassword" placeholder="请再次输入新密码" auto-complete="off" ></el-input>
            </el-form-item>
        </div>
        <el-form-item class="modifypas">
          <el-button type="primary" @click="savePassword()" class="resetPsd">更改密码</el-button>
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          <!-- <el-button type="primary" @click="submitForm('ruleForm'),dialogVisible = true">更改密码</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>

    <!-- dialog -->
    <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <!-- content -->
      <div class="dialogContent">
        <div class="content-left"><img src="../../static/image/forget-human.png" alt=""></div>
        <div class="content-right">
          <p>密码更改完成</p>
          <el-button type="primary" @click="confirmDialog()" class="confirm">确认</el-button>
        </div>
      </div>
      <!-- content end-->
      
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>

    <!-- dialog  end-->
  </div>
</template>
<script>
// 引用loginHeader
import loginHeader from '../components/loginHeader.vue'
  export default {
    data(){
      // 手机号验证
      let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      // reg.test()
      let checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        }
        setTimeout(() => {
          if (!reg.test(this.ruleForm.phone)) {
              callback(new Error('手机号码格式不正确'));
            } 
            callback();

          // if (!Number.isInteger(value)) {
          //   callback(new Error('请输入数字值'));
          // } else {
          //   if (!reg.test(this.ruleForm.phone)) {
          //     callback(new Error('手机号码格式不正确'));
          //   } else {
          //     callback();
          //   }
          // }
        }, 500);
      };
      // 验证码 验证
      let  checkPhonecode = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('验证码不能为空'));
        }
        setTimeout(() => {
          if(this.ruleForm.phoneCode !== '') {
                this.$refs.ruleForm.validateField('checkPhonecode');
            }
            callback();

          // if (!Number.isInteger(value)) {
          //   callback(new Error('请输入验证码'));
          // } else {
          //   if(this.ruleForm.phoneCode !== '') {
          //       this.$refs.ruleForm.validateField('checkPhonecode');
          //   }
          //   callback();
          //   // if (value < 18) {
          //   //   callback(new Error('必须年满18岁'));
          //   // } else {
          //   //   callback();
          //   // }
          // }
        }, 500);
      };
      // 密码验证
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPassword !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      // 确认密码验证
      let validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return{
        // 对齐方式
        labelPosition:'top',
        //
        // status-icon:true,
        ruleForm:{
          phone:'',
          phoneCode:'',
          password:'',
          checkPassword:'',
        },
        rules:{
          // phone: [
          //   { type:'tel', required: true, message: '请输入手机号码', trigger: 'blur' },
            
          // ],
          // phoneCode: [
          //   { type:'number', required: true, message: '请输入手机验证码', trigger: 'blur' },
          //   // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          // ],
           phone:[
             { validator: checkPhone, trigger: 'blur', required: true, }
           ],
          phoneCode:[
            { validator: checkPhonecode, trigger: 'blur', required: true, }
          ],
          password: [
            { validator: validatePass, trigger: 'blur',  required: true, }
          ],
          checkPassword: [
            { validator: validatePass2, trigger: 'blur',  required: true,  }
          ],
        },
        // 
         dialogVisible: false
      }
    },
    // 注册lgoinHeader 组件
    components: {
      loginHeader
    },
    methods: {
      // 表单确认
      // submitForm(formName) {
      //   this.$refs[formName].validate((valid) => {
      //     if (valid) {
      //       alert('submit!');
      //     } else {
      //       console.log('error submit!!');
      //       return false;
      //     }
      //   });
      // },
      // 表单重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      
      // dialog
      handleClose(done) {
        this.dialogVisible = false;
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
      },
      // 发送验证码
      sendCode:function(){
        let data = {
          mobile: this.ruleForm.phone
        }
        this.$http.loginSendCode(data,(res)=>{
          
          console.log(res)
        },(errRes)=>{
          console.log(errRes)
        })

      },
      

      //保存
      savePassword:function(){
        let data = {
          mobile: this.ruleForm.phone,
          mobileCode: this.ruleForm.phoneCode,
          newPwd: md5(this.ruleForm.password)
          // newPwd: this.ruleForm.password
        }
        console.log(data)
        this.$http.forgetPwd(data,(res)=>{
          if(res.errCode==0){
            this.dialogVisible = true;
            //alert("手机号码修改成功");
          }else{
            alert("手机号码修改成功失败")
          }
          console.log(res)
        },(errRes)=>{
          console.log(errRes)
        })
      },
      // 确认dialog
      confirmDialog:function(){
        this. dialogVisible = false;
        this.$router.push('/');
      }


      
    }
  }
</script>

